<template>
  <div class="trip">
    <div class="header">
      <p>历史行程</p>
    </div>
    <div class="bg">
      <img src="../assets/img/xingcheng.png" alt="" />
      <p>太多出游计划别只是想想哦~</p>
      <div class="content">
        <span>开启新的旅程</span>
      </div>
    </div>
    <div class="pic">
      <ul>
        <li><img src="../assets/img/xian.png" alt="" /></li>
        <li>
          <img src="https://file.gzl.cn/group1/M00/4B/59/wKkBH2NbrFyAD0VWAADQckWicxM258.jpg" alt="" />
        </li>
        <li>
          <img src="https://file.gzl.cn/group1/M00/51/8F/wKkBHmNfoBSALZd3AACkrKubrMk206.jpg" alt="" />
        </li>
        <li>
          <img src="https://file.gzl.cn/group1/M00/51/8F/wKkBHmNfr1eAQNN0AADA9kxZtGU209.jpg" alt="" />
        </li>
      </ul>
    </div>
    <div class="bottom"></div>
    <footer>
      <ul>
        <router-link tag="li" to="/home" >
          <div class="img"></div>
          <p class="word">首页</p>
        </router-link>
        <router-link tag="li" to="/trip" class="con">
          <div class="img"></div>
          <p class="word">行程</p>
        </router-link>
        <router-link tag="li" to="/payment">
          <div class="img"></div>
          <p class="word">支付</p>
        </router-link>
        <router-link tag="li" to="/my">
          <div class="img"></div>
          <p class="word">我的</p>
        </router-link>
      </ul>
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.trip {
  .header {
    height: 44px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    p {
      color: #434343;
      font-size: 15px;
      margin-right: 14px;
    }
  }
  .bg {
    width: 232px;
    margin: 0 auto;
    img {
      width: 100%;
    }
    p {
      color: #7d7d7d;
      margin: 20px 0;
      text-align: center;
    }
    .content {
      width: 200px;
      height: 44px;
      line-height: 44px;
      border-radius: 22px;
      background-color: #ffd800;
      text-align: center;
      margin: 0 auto;
    }
  }
  .pic {
    ul {
      padding: 0 10px;
      li {
        width: 100%;
        margin-bottom: 10px;
        img {
          width: 100%;
        }
      }
    }
  }
  .bottom {
    height: 42px;
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    ul {
      display: flex;
      li {
        width: 25%;
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 12px;
        color: #707070;
        &.con {
          .word {
            color: #242424;
          }
        }
        .img {
          width: 26px;
          height: 26px;
          background: url(../assets/img/common.png) no-repeat -115px -243px;
          background-size: 400px;
        }
        &:nth-of-type(2) {
          .img {
            background-position: -153px -280px;
          }
        }
        &:nth-of-type(3) {
          .img {
            background-position: -191px -243px;
          }
        }
        &:nth-of-type(4) {
          .img {
            background-position: -227px -243px;
          }
        }
      }
    }
  }
}
</style>
